<template>
  <div >
  <el-container>
  <el-header>
     <div id="header_left">
    奇瑞集团IT部门
    </div>
    <div id="header_right">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1"> 首页</el-menu-item>
      
      <!-- <el-menu-item index="2" >研究成果</el-menu-item>
      <el-menu-item index="3" >成员介绍</el-menu-item>
      <el-menu-item index="4" >项目demo</el-menu-item>
      <el-menu-item index="5" >实用工具</el-menu-item>-->
      <el-menu-item index="6">登陆</el-menu-item> 
      </el-menu>
      
    </div>
  
    <div class="line"></div>
  </el-header>
  <el-divider></el-divider>
  <el-main>

    <!-- <index /> -->
    <router-view/>
  </el-main>
  <el-footer>

     <div id="copyright">
      Copyright ©️ 2022 cch. All Rights Reserved
    </div>


  </el-footer>
</el-container>

  </div>  

</template>

<style scoped>

#header_left{
  float: left;
   color:cornflowerblue;
  font-size: 25px;
  font-weight: 800;
  text-transform: uppercase;/*大写*/
  position: absolute;
  top: 3%;
  left:15%;
}
#header_right{
  float: left;  
  padding-left: 50%;
 
  /* left:45%; */

}

/* .el-menu{
  left: 45%;

} */
.el-menu-item {
   font-size: 18px;
}
#copyright{

  position: absolute; 
  top: 95%;
  left: 38%;

}
</style>

<script>
import index from '@/components/index.vue'
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        if(key==1){
          this.$router.push("/home")
        }else if(key==2){
          this.$router.push("/research")
        }else if(key==3){
          this.$router.push("/members")
        }else if(key==4){
          this.$router.push("/project")
        }else if(key==5){
          this.$router.push("/util")
        }else if(key==6){
          this.$router.push("/login")
        }
      }
    },
    components: {
      
    index
  }
  }
  
</script>
